<template>
    <div class="breadCrumb" sepatator="/">
        <a href="" v-for="(item, index) in data" :key="index">{{ item.meta.name + sep(index) }}</a>
        <!-- <router-link :to="{name:item.name}" v-for="(item,index) in data" :key="index">{{item.meta.name + sep(index)}}</router-link> -->
    </div>
</template>

<script setup>
import { toRefs } from 'vue'
let props = defineProps({
    data: {
        type: Array,
        default() {
            return []
        }
    },
    sepatator: {
        type: String,
        default() {
            return '/'
        }
    }
})

let { data } = toRefs(props)

let sep = (index) => {
    if (index == data.value.length - 1) {
        return ''
    } else {
        return '/'
    }
}

</script>

<style scoped>
.breadCrumb {
    font-size: 16px;
    font-weight: 900;
}
</style>